import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { getDocs } from './Docs';
import { snippets } from './Snippets';
import apiConfigs from './Configs';
import './index.less';
import { WeaLocaleProvider } from 'ecCom';
const  { getLocaleLabelByCode } = WeaLocaleProvider;
const { SourceCode } = window.mmComs;

@observer
export default class SourceCodeEditor extends Component {
  state = {
    snippets: []
  }

  componentDidMount() {
      const snippets = this.getSnippets();
      SourceCode.load().then(FuncLibModule => {
        const { registerAceMode } = FuncLibModule.default;
        registerAceMode("EdcForm", {
          getSnippets: () => snippets,
          identifier: ["EdcForm.", "$"]
        });
        this.setState({ snippets });
      });
  }

  getSnippets = () => {
    return snippets().map(({
      snippet, snippetFace, noteContent, noteTitle, example, id
    }) => ({
        example,
        id: id,
        name: snippetFace,
        title: noteTitle,
        content: snippet,
        snippet: snippetFace,
        layout: noteContent,
    }));
  }

  getCodeBlock = () => {
    const { codeBlock } = this.props;

    if (codeBlock) {
      return [codeBlock.JS, codeBlock.CSS];
    }
  }

  render() {
    const { visible, onValueChange, codeBlock } = this.props;
    const { getComponents } = this.props.store;
    const { snippets } = this.state;
    const coms = getComponents();
    
    if ( !snippets.length || !codeBlock ) return null;

    return (
      <SourceCode ecId={`${this && this.props && this.props.ecId || ''}_SourceCode@1gbjvs`}
        wrapperClsName={ !visible ? 'wea-hide' : ''}
        docs={getDocs()}
        snippets={snippets}
        apiConfigs={apiConfigs}
        includeScopes={['EdcForm']}
        configProps={{ coms }} 
        defaultValue={this.getCodeBlock()}
        onChange={onValueChange}
        {...this.props} 
      />
    )
  }
}